<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>echart-visualMap 实例</title>
    {% include 'common/echart_base.html' %}

    <script type="text/javascript">
        $(document).ready(function () {

            var visualMap1={
                // 不显示 visualMap 组件，只用于明暗度的映射
                show: true,
                //连续型（默认）
                type:'continuous',
                //type:'piecewise',
                // 映射的最小值为 0
                min: 0,
                // 映射的最大值为 100
                max: 100,
                //两端的文本
                text:['高','低'],
                //分割几个段
                //splitNumber:3,
                //显示方向
                //orient:'horizontal',
                //inverse:true,
                //seriesIndex: 0,     // 对第1个系列进行映射。
                inRange: {
                    // 明暗度的范围是 0 到 1
                    colorLightness: [0.3, 0.7],
                    //颜色数值 小 到 大
                    color: ['#4651A8', '#a8a13e', '#A87819'],
                    //图元的大小(散点图可以看到效果)
                    symbolSize: [30, 100]
                }
            };

            var visualMap2={
                //分段型
                type: 'piecewise',
                right:0,
                //min: 0,
                //max: 100,
                maxOpen:true,
                //dimension: [0],       // series的第1个维度（即 value[0]）被映射
                //categories:["高","中","底"],
                //每个段落映射
                pieces: [
                    //symbolSize:[100,100] 标记的大小（宽度，高度）
                    {gt: 100,symbolSize:[100,100],label:'高',color:'#FF6A20'},           // >100
                    {gt: 80, lte: 100,symbolSize:[85,85],label:'较高',color:'#FF8C16'},  // (80,100]
                    {gt: 50, lte: 80,symbolSize:[75,75,],label:'适中',color:'#FFD51F'},
                    {gt: 30, lte: 50,symbolSize:[45,45],label:'低',color:'#67A81D'},
                    {lt: 30, symbolSize:[35,35],label:'最低',color:'#A89170'},
                ],
            }

            var option={

                legend:{},
                tooltip:{},
                toolbox:{
                    show:true,
                    feature:{
                        magicType: {
                            type: ['line', 'bar', 'stack', 'tiled','scatter']
                        },
                        saveAsImage:{name:'视觉映射实例'}
                    }
                },
                visualMap: [
                    //visualMap1,
                    visualMap2
                ],
                xAxis:{
                    type:'category',
                    data:["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子","帽子"]
                },
                yAxis:{
                    type:'value'
                },
                series:[
                    {
                        name:'销量',
                        type:'bar',
                        visualMap:true,
                        data:[57,20, 43, 15, 36, 95,120]
                    }
                ]

            };

            var mychart=echarts.init(document.getElementById('echart_visualMap'),'dark');
            mychart.setOption(option);

        })

    </script>

</head>
<body>

<div id="echart_visualMap" style="width: 700px;height: 500px;"></div>
</body>
</html>